<template>
<view class="starBoxCard">
    <view class="between topstate" v-if="type===1">
        <view class="left">
            <cdn-img src="/static/img/shop.png" class="shop"/>
            <text class="id">活动ID:{{ item.id }}</text>
        </view>
        <view class="btn-view fcenter">查看详情</view>
        <!-- <view class="right">已完成</view> -->
    </view>
    <view class="between info">
        <view class="info_left">
            <view class="title flex ell">
                <TypeIcon :type="item.type"/>
                <text class="text">{{ item.title }}</text>
            </view>
            <view class="tagGroup">
                <view class="tag fcenter redd" v-if="item.belong_to_admin_id&&item.belong_to_admin_id.shop_tag&&item.belong_to_admin_id.shop_tag.name">{{ item.belong_to_admin_id.shop_tag.name }}</view>
                <view class="tag fcenter blue">等级LV{{ item.start_level }}</view>
                <!-- <view class="lv">
                    <cdn-img src="/static/img/star/box.png" class="lv_bg" />
                    <view class="type fcenter">娱乐</view>
                    <view class="lv_num fcenter">等级LV{{ item.start_level }}</view>
                </view> -->
                <view class="tag fcenter orange">粉丝≥<text v-if="item.award_rule&&item.award_rule.length>0">{{ transFans(item.award_rule[0].fans_num) }}</text></view>
            </view>
            <view class="ell time" v-if="type!==2">活动截止日期: {{ item.end_time }}</view>
        </view>
        <cdn-img :src="item.upload[0].full_path" v-if="item.upload&&item.upload.length>0" class="pic" mode="aspectFill" :lazyLoad="true"/>
        <cdn-img :src="item.pic" v-else class="pic" mode="aspectFill" :lazyLoad="true"/>
    </view>
    <view class="data" v-if="type!==2">
        <view class="item" v-if="[3,5].indexOf(item.type)===-1">
            <view class="num">￥<text v-if="item.award_rule&&item.award_rule.length>0">{{ item.award_rule[item.award_rule.length-1].money }}</text></view>
            <view class="tit"><text v-if="item.type==1">云剪</text>任务金</view>
        </view>
        <view class="item">
            <view class="num">{{item.brokerage_rate}}%</view>
            <view class="tit">最高佣金比例</view>
        </view>
        <view class="item">
            <view class="num">￥{{ item.tallest_brokerage }}</view>
            <view class="tit">最高带货佣金</view>
        </view>
    </view>
</view>
</template>

<script setup>
import TypeIcon from '@/components/TypeIcon'
import { transFans } from '@/utils/helper'; 

const props = defineProps({
    item: {
        type: Object,
        default: {},
    },
    type: { // 0活动卡片  1任务卡片  2任务详情卡片
        type: Number, 
        default: 1,
    }
})
</script>

<style lang="scss">
.starBoxCard{
    width: 355px;
    // min-height: 198px;
    margin: 0 auto 8px;
    background-color: #fff;
    border-radius: 15px;
    padding: 10px 10px 10px;
    .shop{
        width: 13px;
        height: 13px;
    }
    .id{
        font-size: 13px;
        color: #333333;
        font-weight: bold;
        margin-left: 5px;
    }
    .btn-view{
        width: 66px;
        height: 22px;
        border: 0.5px solid #2b5eff;
        border-radius: 11px;
        color: #2b5fff;
        font-size: 12px;
    }
    .left{
        display: flex;
        align-items: center;
    }
    .topstate{
        margin-bottom: 12.5px;
    }
    .info{
        align-items: flex-start;
    }
    .pic{
        width: 89px;
        height: 71px;
        border-radius: 5px;
        background-color: #ccc;
        margin-left: 5px;
    }
    .info_left{
        flex: 1;
        .ell{
            -webkit-line-clamp: 3!important;
        }
        .text{
            vertical-align: middle;
        }
    }
    .tagGroup{
        display: flex;
        margin: 5px 0;
        font-size: 11px;
    }
    .lv{
        width: 79px;
        height: 18.5px;
        position: relative;
        display: flex;
        .lv_bg{
            width: 79px;
            height: 18.5px;
            position: absolute;
            z-index: 0;
        }
        .type,.lv_num{
            position: relative;
            z-index: 1;
        }
        .type{
            color: #fff;
            width: 30px;
        }
        .lv_num{
            color: #FF3C2A;
            flex: auto;
        }
    }
    .tag{
        min-width: 60px;
        height: 18.5px;
        border-radius: 3px;
        margin-right: 10px;
        padding: 0 5px;
    }
    .redd{
        background: #FF3C2A;
        color: #fff;
    }
    .blue{
        background: #ecf1ff;
        color: #3889FF;
    }
    .orange{
        background: #fff3ec;
        color: #FC6F2E;
    }
    .time{
        font-size: 11px;
        color: #666;
    }
    .data{
        padding: 10px 0 2px;
        border-top: 1px solid #eaeaea;
        margin-top: 10px;
        display: flex;
        .item{
            flex: 1;
            text-align: center;
        }
        .num{
            color: #F30703;
            font-weight: 700;
        }
        .tit{
            color: #666;
            font-size: 12px;
        }
    }
}
</style>